<template>
  <div>
    <div class="createPost-container">
      <el-row>
        <el-col :span="24">
          <div class="postInfo-container">
            {{ reporttitle }}</div>
        </el-col>
      </el-row>
    </div>
    <div class="chart-container"><chart
      height="100%"
      width="100%"
      :xaxis="xAxis"
      :legends="legends"
      :series="series"
      title="报表"
    /></div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/LineMarker'
// import echarts from 'echarts'

export default {
  name: 'LineChart',
  components: { Chart },
  data() {
    return {
      xAxis: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55'],
      legends: ['AA', 'BB', 'CC'],
      series: [{
        name: 'AA',
        type: 'line',
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
      }, {
        name: 'BB',
        type: 'line',
        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
      }, {
        name: 'CC',
        type: 'line',
        data: [210, 122, 125, 145, 122, 191, 134, 150, 120, 110, 160, 152]
      }],
      reporttitle: '活跃用户报表',
      datetype: null,
      datetypes: [
        { code: '1', title: '年报' },
        { code: '2', title: '季报' },
        { code: '3', title: '月报' },
        { code: '4', title: '周报' },
        { code: '5', title: '日报' }
      ],
      producttype: null,
      producttypes: [
        { code: '1', title: '手机' },
        { code: '2', title: '电脑' },
        { code: '3', title: '汽车' },
        { code: '4', title: '媒体' }
      ],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value6: '',
      value7: ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
.head-container {
  position: relative;

  .head-item-container {
    padding: 20px 5px 20px 0px;
    position: relative;
    @include clearfix;
    margin-bottom: 0px;
  }
}
</style>
